<template>
  <div class="student-edit">
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="学号" prop="studentNumber">
        <el-input v-model="form.studentNumber" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="班级" prop="className">
        <el-select v-model="form.className" placeholder="请选择班级">
          <el-option
            v-for="item in classOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="专业" prop="major">
        <el-input v-model="form.major" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import myAxios from "../../../plugins/myAxios.js";

const formRef = ref()
const form = reactive({
  studentId: '',
  name: '',
  gender: '',
  className: '',
  major: '',
  phone: '',
  email: ''
})

const rules = {
  // studentId: [
  //   { required: true, message: '请输入学号', trigger: 'blur' },
  //   { pattern: /^\d{7}$/, message: '学号必须为7位数字', trigger: 'blur' }
  // ],
  // name: [
  //   { required: true, message: '请输入姓名', trigger: 'blur' }
  // ],
  // class: [
  //   { required: true, message: '请选择班级', trigger: 'change' }
  // ],
  // major: [
  //   { required: true, message: '请输入专业', trigger: 'blur' }
  // ],
  // phone: [
  //   { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  // ],
  // email: [
  //   { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  // ]
}

const classOptions = [
  { label: '计科2101', value: '计科2101' },
  { label: '计科2102', value: '计科2102' }
]

const route = useRoute()
const studentId = route.params.id // 获取路由参数中的学生id

// 加载学生信息的方法
const loadStudentInfo = async () => {
  try {
    // 这里替换成实际的API调用
    const param = {studentId:studentId}

    const response = await myAxios.get('/admin/student/get?studentId='  + studentId)
    // 将获取到的数据填充到表单中
    Object.assign(form, {
      studentNumber: response.studentNumber,
      name: response.name,
      gender: response.gender,
      className: response.className,
      major: response.major,
      phone: response.phone,
      email: response.email
    })
  } catch (error) {
    ElMessage.error('加载学生信息失败')
  }
}

// 组件挂载时加载数据
onMounted(() => {
  if (studentId) {
    loadStudentInfo()
  }
})

// 修改提交表单方法
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        // 这里替换成实际的API调用
        await myAxios.post(`/admin/student/update`, {...form})
        ElMessage.success('保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
        console.error(error)
      }
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
.student-edit {
  max-width: 600px;
  margin: 20px auto;
}
</style>
